<template>
  <view class="buynow-page">
    <!-- 订单信息卡片 -->
    <view class="order-card">
      <view class="card-title">订单信息</view>
      <view class="order-info">
        <view class="info-item">
          <text class="label">订单金额</text>
          <text class="value price">¥{{orderInfo.paymentAmount}}</text>
        </view>
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{orderInfo.orderId}}</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{orderInfo.createTime}}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="price-info">
        <text class="price">¥{{orderInfo.paymentAmount}}</text>
      </view>
      <view class="btn-group">
        <button class="cancel-btn" @click="handleCancel">取消</button>
        <button class="pay-btn" @click="handlePay">立即支付</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '../../stores/api';
const orderInfo = ref({
	// userId:0,
  orderId: '',
  paymentAmount: 0,
  createTime: '',
  courseIds: '',
  paymentAmounts: '',
  orderNumber:''
})
let courseids='';
let ids='';
// 创建订单
const createOrder = async () => {
	const userStore = useUserStore()
	  // 获取用户信息
	  const userid = userStore.getUserId;
  try {
    const res = await uni.request({
      url: 'http://localhost:8088/order/insertOrder',
      method: 'POST',
      data: {
        courseIds: orderInfo.value.courseIds,
        paymentAmounts: orderInfo.value.paymentAmounts,
		userId:userid
      }
    })
    console.log("响应oooo",res)
    if (res.data.code === 200) {

      orderInfo.value.orderId = res.data.data.orderNumber;
	  getIds();
      orderInfo.value.createTime = new Date().toLocaleString()
      // 计算总金额
      const amounts = orderInfo.value.paymentAmounts.split(',')
      orderInfo.value.paymentAmount = amounts.reduce((sum, amount) => sum + Number(amount), 0)
    } else {
      uni.showToast({
        title: '创建订单失败,已存在订单！',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    })
  }
}

// 处理支付了且1221123
const handlePay = () => {

  uni.navigateTo({
    url: '/pages/payment/index?TradeNo=' + orderInfo.value.orderId+ '&paymentAmount=' + orderInfo.value.paymentAmount+"&ids="+ids+"&courseids="+courseids
  })
}

// 获取ids
const getIds = async () => {
  try {
    const res = await uni.request({
      url: 'http://localhost:8088/usercourse/getIds',
      method: 'POST',
      data: {
        orderNumber: orderInfo.value.orderId,
      }
    })
    console.log("响应oooo",res)
    if (res.data.code === 200) {
	  ids = res.data.data.orderIds;
	  courseids =  res.data.data.courseIds;
    } else {
      uni.showToast({
        title: '获取ids失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    })
  }
}
// 取消订单
const handleCancel = () => {
  uni.showModal({
    title: '提示',
    content: '确定要取消订单吗？',
    success: (res) => {
      if (res.confirm) {
        uni.reLaunch({
          // url: '/pages/clazz/index',
		  url: '/pages/clazzcenter/clazzcenter',
		  
        })
      }
    }
  })
}
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  if (options.courseIds && options.paymentAmounts) {
    orderInfo.value.courseIds = options.courseIds
    orderInfo.value.paymentAmounts = options.paymentAmounts
    createOrder()
  }
})
</script>

<style lang="scss">
.buynow-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  
  .order-card {
    margin: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    .order-info {
      .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        
        .label {
          color: #666;
          font-size: 28rpx;
        }
        
        .value {
          font-size: 28rpx;
          
          &.price {
            color: #ff4d4f;
            font-weight: bold;
          }
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .price-info {
      .price {
        color: #ff4d4f;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    
    .btn-group {
      display: flex;
      gap: 20rpx;
      
      button {
        margin: 0;
        padding: 0 40rpx;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        border-radius: 35rpx;
        
        &.cancel-btn {
          background-color: #f5f5f5;
          color: #666;
        }
        
        &.pay-btn {
          background-color: #ff4d4f;
          color: #fff;
        }
      }
    }
  }
}
</style>
